<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="top-bg-image">
			<view class="conter-warp">
				<!-- <view class="invitation-reward" v-if="configInfo.invitation_reward_parent_money > 0">
					<text class="title">{{$t('invitation.reward-title')}}</text>
					<view class="money">
						<text class="num number">{{ configInfo.invitation_reward_parent_money }}</text>
						<text class="company">{{ configInfo.money_company }}</text>
					</view>
					<view class="other" v-if="configInfo.invitation_reward_money > 0">
						{{$t('invitation.reward-money-desc')}}<text>{{ configInfo.invitation_reward_money }}</text>{{ configInfo.money_company }}
					</view>
				</view> -->
				
				<view class="invitation-code position-relative">
					<text class="title">{{$t('invitation.you-qr-code')}}</text>
					<text class="code ">{{userInfo.invitation_code}}</text>
					<u-button class="m-t-sm" shape="circle" size="mini" :text="$t('invitation.copy-code')" @click="$util.copyText(userInfo.invitation_code)"></u-button>
					<!-- <text class="btn btn-xs" @click="$util.copyText(userInfo.invitation_code)">{{}}</text> -->
				</view>
				
				<view class="invitation-btn">
					<text @click="sheetShow = true"></text>
				</view>
			</view>
			<image src="@/static/images/invitation_hongbao.png" mode="widthFix">
		</view>
		
		<view class="m-desc" style="margin-top: 20px;">
			<view class="u-title">
				<text>{{$t('invitation.incom-title')}}</text>
			</view>
			<view class="u-content">
				<view class="u-data flex-between">
					<view class="e-item" @click="$util.go('invitation/team_list')">
						
						<view class="text-red rel">
							<text v-if="userInfo && userInfo.invitation_data" class="number">{{ userInfo.invitation_data.oneLevelCount }}</text>
							<text v-if="!userInfo">NULL</text>
							<text class="company">人</text>
							<text class="badge-team">查看</text>
						</view>
						<view class="desc">
							{{$t('invitation.incom-label-1')}} <!-- {{userInfo}} -->
						</view>
					</view>
					<view class="e-item">
						<view class="text-red">
							<text v-if="userInfo && userInfo.invitation_data" class="number">{{ userInfo.invitation_data.allProfit }}</text>
							<text v-if="!userInfo">NULL</text>
						</view>
						<view class="desc">
							{{$t('invitation.incom-label-2')}}
							<text v-if="!configInfo.money_compan">（{{ configInfo.money_company }}）</text>
						</view>
					</view>
				</view>
				<view class="e-tips text-auxiliary">
					{{$t('invitation.incom-data-tips')}}
				</view>
			</view>
		</view>
		<view class="m-desc" style="margin-top: 50px;">
			<view class="u-title">
				<text>{{$t('invitation.rule-title')}}</text>
			</view>
			<view class="u-content">
				<view class="u-rule">
					<view class="rule-item flex-start">
						<text class="e-num">1</text>
						<view class="e-desc">
							<u-parse :tagStyle="parseStyle" :content="$t('invitation.rule-1')"></u-parse>
						</view>
					</view>
					<view class="rule-item flex-start"  v-if="isShow">
						<text class="e-num">2</text>
						<view class="e-desc">			
							<u-parse :tagStyle="parseStyle" :content="$util.handleStr($t('invitation.rule-2'),configInfo.invitation_reward_parent_money,configInfo.money_company)"></u-parse>
							<view v-if="configInfo.invitation_reward_parent_money_two > 0">
								<u-parse :tagStyle="parseStyle" :content="$util.handleStr($t('invitation.rule-21'),configInfo.invitation_reward_parent_money_two,configInfo.money_company)"></u-parse>
							</view>
							<view class="font" v-if="configInfo.invitation_reward_num > 0">
								<u-parse :tagStyle="parseStyle" class="text-xs" :content="$util.handleStr($t('invitation.rule-3'),configInfo.invitation_reward_num)"></u-parse>
							</view>	
						</view>
					</view>
					<view class="rule-item flex-start"  v-if="userInfo && userInfo.level_info && userInfo.level_info.one_parent_reward > 0">
						<text class="e-num">{{ruleNumber}}</text>
						<view class="e-desc">
							<u-parse :tagStyle="parseStyle" :content="$util.handleStr($t('invitation.rule-4'), userInfo.level_info.one_parent_reward)"></u-parse>
						</view>
					</view>
					<view class="rule-item flex-start" v-if="userInfo && userInfo.level_info && userInfo.level_info.two_parent_reward > 0">
						<text class="e-num">{{ruleNumber + 1}}</text>
						<view class="e-desc">
							<u-parse :tagStyle="parseStyle" :content="$util.handleStr($t('invitation.rule-5'), userInfo.level_info.two_parent_reward)"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<u-action-sheet 
			:round="true"
			:show="sheetShow"
			@close="sheetShow = false"
			:cancelText="$t('app.cancel-btn')"
		>
			<view class="flex-start" style="padding: 15px 30rpx;">
				<view class="u-sheet" @click="copyLink()">
					<view class="e-icon">
						<u-icon
							name="attach"
							size="25"
							color="#1da8fe"
						></u-icon>
					</view>
					<text>{{$t('invitation.copy-link')}}</text>
				</view>
				<view class="u-sheet">
					<view class="e-icon" @click="getPoster()">
						<u-icon
							name="photo-fill"
							size="25"
							color="#33d27a"
						></u-icon>
					</view>
					<text>{{$t('invitation.poster-btn')}}</text>
				</view>
			</view>
		</u-action-sheet>
		
		<m-modal
			:show="posterModal"
			:btn="$t('invitation.poster-save-btn')"
			@close="posterModal = false"
			@btnComplete="$util.saveImageToPhoto(posterUrl)"
		>
			<view class="slot-content">
				<image :src="posterUrl" mode="widthFix" style="width: 100%;"></image>
			</view>
			<view class="m-l-md m-r-md m-t-xs text-xs text-danger">
				* {{ $t('invitation.poster-save-tips') }}
			</view>
		</m-modal>
		
		<m-modal
			:show="urlShow"
			:title="$t('invitation.share-link-title')"
			:btn="$t('invitation.share-link-copy-btn')"
			@close="urlShow = false"
			@btnComplete="$util.copyText(shareUrl)"
		>
			<view class="slot-content m-md text-sm">
				<view class=" text-xs text-secondary u-line-2" style="background-color: #f3f3f3;border-radius: 5px;padding:5px">
					<text>{{shareUrl}}</text>
				</view>
				<view class="m-t-sm">
					<text class="text-xs text-danger">{{$t('invitation.share-link-copy-content')}}</text>
				</view>
			</view>
		</m-modal>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				posterUrl:'',
				posterModal:false,
				sheetShow:false,
				ruleNumber:2,
				parseStyle:{
					b: 'color: #fd755e;margin: 0 3px;'
				},
				scrollTop: 0,
				shareUrl:'',
				urlShow:false
			}
		},
		computed: {
			isShow:function() {  
				let {
					invitation_limit_level,
					invitation_reward_parent_money
				} = this.configInfo
				if(invitation_reward_parent_money > 0 && ( invitation_limit_level == 0 || invitation_limit_level > 0 && invitation_limit_level == this.userInfo.level)){
					return true;
				}
				return false;
			},
			...mapState({
				userInfo: state => state.user.userInfo,
				configInfo: state => state.config.configInfo,
			})
		},
		// computed: mapState({
		// 	userInfo: state => state.user.userInfo,
		// 	configInfo: state => state.config.configInfo,
		// }),
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(){
			let {
				invitation_limit_level,
				invitation_reward_parent_money
			} = this.configInfo
			if(invitation_reward_parent_money > 0 && ( invitation_limit_level == 0 || invitation_limit_level > 0 && invitation_limit_level == this.userInfo.level)){
				this.ruleNumber = 3
			}
		},
		methods: {
			/** 生成海报 **/
			async getPoster(){
				this.$util.showLoading(this.$t('invitation.postering'))
				let res = await this.$api.user.getUserPoster()
				if(res.code == 200){
					let thos = this
					this.posterUrl = res.data
					this.$util.showToast(res.msg,function(){
						thos.sheetShow = false
						thos.posterModal = true
					})
					console.log(this.posterUrl)
				}
			},
			
			// 复制链接
			async copyLink(){	
				let res = await this.$api.user.getShareLink()
				if(res.code == 200){
					this.shareUrl = res.data
					this.sheetShow = false
					this.urlShow = true
					// this.$util.copyText(res.data);
					// this.sheetShow = false;
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		position: relative;
		width: 100%;
		height: 100%;
		background: url('@/static/images/invitation_bg.png')  no-repeat top center  ;
		background-size: 100%;
		box-sizing: border-box;
		background-color: #fcefdf;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		-ms-interpolation-mode: nearest-neighbor;
	}
	.top-bg-image{
		padding-top: 300rpx;
		position: relative;
		.conter-warp{
			position: absolute;
			text-align: center;
			width: 100%;
			z-index: 2;
		}
		.invitation-reward{
			padding-top: 65rpx;
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			text.title{
				margin-top: 20rpx;
				color: #ff1635;
				font-size: $contentSize;
				font-weight: bold;
			}
			.money{
	
				margin-top: 10rpx;
				position: relative;
			}
			text.num{
				color: #fb1003;
				font-weight: bold;
				font-size:108rpx;
			}
			text.company{
				font-size: $contentSize;
				color: #e4b4a2;
				position: absolute;
				// width: 100%;
				white-space: nowrap;
				// right: -$contentSize * 2;
				bottom: 25rpx;
			}
			.other{
				font-weight: bold;
				color: #e4b4a2;
				font-size: $contentSize;
				margin-top: 5rpx;
				text{
					margin: 0 5rpx;
				}
			}
		}
		.invitation-code{
			padding-top: 65rpx;
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items: center;
			text.title{
				color: #e4b4a2;
				font-size: $contentSize;
				font-weight: bold;
			}
			text.code{
				font-weight: bold;
				font-size: 68rpx;
				color: #fb0f02;
			}
			/deep/ .u-button{
				margin-top:15rpx;
				width: 100px;
				background-color: transparent;
				color: #fb0f02;
				border:1px solid #fb0f02;
				padding: 30rpx!important;
			}
		}
		.invitation-btn{
			// z-index: 2;
			position: absolute;
			top: 0;
			width: 100%;
			margin-top: 520rpx;
			text-align: center;
			text{
				display: block;
				background-color: transparent;
				width: 500rpx;
				height: 100rpx;
				border-radius: 25px;
				margin: 0 auto;
			}
		}
	
		
		image{
			width: 100%;
			image-rendering: -moz-crisp-edges;
			image-rendering: -o-crisp-edges;
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
			-ms-interpolation-mode: nearest-neighbor;
		}
	}

	.m-desc{
		margin: 10px 50rpx;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
		position: relative;
	}
	/deep/ .u-steps .u-text{
		width: auto!important;
	}
	.u-title{
		background-color: #ff1535;
/* 		border: 2px solid #fd5c44; */
		text-align: center;
		width: 120px;
		height: 25px;
		line-height: 25px;
		position: absolute;
		top:-12px;
		left: 50%;
		margin-left: -60px; 
		
		border-radius: 5px;
		color: #fff;
		font-weight: bold;
/* 		left: calc(100% - 72%); */
	}
	.u-title::before{
		position: absolute;
		top: 2px;
		content: '';
		left: -7px;
		width: 0;
		height: 0;
		border-bottom: 10px solid #e31818;
		border-left: 8px solid transparent;
	}
	.u-title:after{
		position: absolute;
		top: 2px;
		content: '';
		right: -7px;
		width: 0;
		height: 0;
		border-bottom: 10px solid #e31818;
		border-right: 8px solid transparent;
	}
	.u-title text{
		position: relative;
		font-size: 30rpx;
	}
	.u-title text::before{
		position: absolute;
		content: '';
		width: 5px;
		height: 5px;
		background-color: #fccd3b;
		border-radius: 25px;
		left: -10px;
		top: calc(100% - 10px);
	}
	.u-title text::after{
		position: absolute;
		content: '';
		width: 5px;
		height: 5px;
		background-color: #fccd3b;
		border-radius: 25px;
		right: -10px;
		top: calc(100% - 10px);
	}
	.u-content{
		padding-top: 10px;
		font-size: 33rpx;
	}
	.u-content .u-steps{
		margin: 15px 0;
	}
	.u-content .share-btn{
		margin: 10px 0;
		margin-top: 25px;

	}
	.u-content .share-btn .btn{
		display: block;
		width: 50%;
		position: relative;
		margin: 0 auto;
		// background-color: $maincolor-1;
		background: linear-gradient(90deg, #F2BC35 , #FF9A18);
		font-weight: bold;
		letter-spacing: 1px;
		border:5px solid #ffedd5;
	}
	.u-content .share-btn .label{
		position: absolute;
		right: -10px;
		top: -10px;
		background-color: #fd755e;
		color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.u-content .u-data{
		margin: 15px 0;
	}
	.u-content .u-data .e-item{
		width: 50%;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
	}
	.u-content .u-data .e-item text.company{
		font-size: 27rpx;
		margin-left: 3px;
	}
	.u-content .u-data .e-item .desc{
		font-size: 27rpx;
		color: #3f2a17;
	}
	.u-content .e-tips{
		font-size: 28rpx;
		text-align: center;
		color: #999;
	}
	.u-rule .rule-item{
/* 		font-size: 32rpx; */
		position: relative;
		flex-wrap: nowrap;
		margin: 15px 0;
		font-size: 30rpx;
		align-items: flex-start;
	}
	.u-rule .e-desc{
		padding-left: 30px;
	}
	.u-rule .e-desc b{
		color: #fd755e;
		margin: 0 3px;
	}
	.u-rule .e-num{
		position: absolute;
		width: 20px;
		height: 20px;
		font-weight: bold;
		background-color: #fd755e;
		color: #fff;
		font-style: italic;
		border-radius: 100%;
		font-size: 30rpx;
		text-align: center;
	}
	.u-sheet{
		font-size: 26rpx;
		text-align: center;
		width: 25%;
		.e-icon{
			background-color: $incolor-4;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			text-align: center;
			display: flex;
			justify-content: center;
			align-content: center;
			margin: 0 auto;
			margin-bottom: 5px;
		}

	}
	.badge-team{
		// left: ;
		// right: 0;
		margin-left: 10rpx;
		position: absolute;
		border-radius: 25px;
		padding: 3px 5px;
		font-size: 20rpx;
		color: #fff;
		background-color: #ff1535;
		border-bottom-left-radius: 0;
		font-weight: 400;
	}
/* 	.slot-icon {
		width: 30px;
		height: 30px;
		text-align: center;
		background-color: #fff;
		border:1px solid #fd755e;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		padding: 5px 3px;
	}
	.slot-icon u-icon{


	} */
	
            .animat{
                animation:mymove 5s infinite;
                -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
                animation-direction:alternate;/*轮流反向播放动画。*/
                animation-timing-function: ease-in-out; /*动画的速度曲线*/
                /* Safari 和 Chrome */
                -webkit-animation:mymove 5s infinite;
                -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
                -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
            }
            @keyframes mymove
            {
                0%{
                transform: scale(1);  /*开始为原始大小*/
                }
                25%{
                    transform: scale(1.1); /*放大1.1倍*/
                }
                50%{
                    transform: scale(1);
                }
                75%{
                    transform: scale(1.1);
                }

            }
            
            @-webkit-keyframes mymove /*Safari and Chrome*/
            {
                0%{
                transform: scale(1);  /*开始为原始大小*/
                }
                25%{
                    transform: scale(1.1); /*放大1.1倍*/
                }
                50%{
                    transform: scale(1);
                }
                75%{
                    transform: scale(1.1);
                }
            }

</style>
